<html>

<head>
    <title>各城市数据</title>
</head>

<body id="city" style="background-color: transparent;margin:0;padding:0;">
</body>
<script src="js/echarts.min.js"></script>
<script src="js/axios.min.js"></script>
<script>
    var myChart = echarts.init(document.getElementById('city'));
    var spirit = 'image://';

    var maxData = 200;

    option = {
        "title": {
            "text": "各省市确诊人数",
            "left": "center",
            "y": "10",
            "textStyle": {
                "color": "#fff"
            }
        },
        "backgroundColor": "",
        "grid": {
            "left": "20%",
            "top": "10%",
            "bottom": 10
        },
        "tooltip": {
            "trigger": "item",
            "textStyle": {
                "fontSize": 12
            },
            "formatter": "{b0}:{c0}"
        },
        "xAxis": {
            "max": 300,
            "splitLine": {
                "show": false
            },
            "axisLine": {
                "show": false
            },
            "axisLabel": {
                "show": false
            },
            "axisTick": {
                "show": false
            }
        },
        "yAxis": [
            {
                "type": "category",
                "inverse": false,
                "data": [
                    "山西",
                    "四川",
                    "西藏",
                    "北京",
                    "上海",
                    "内蒙古",
                    "云南",
                    "黑龙江",
                    "广东",
                    "江苏"
                ],
                "axisLine": {
                    "show": false
                },
                "axisTick": {
                    "show": false
                },
                "axisLabel": {
                    "margin": -4,
                    "textStyle": {
                        "color": "#fff",
                        "fontSize": 16.25
                    }
                }
            },

        ],
        "series": [
            {
                "type": "pictorialBar",
                "symbol": "image://",
                "symbolRepeat": "fixed",
                "symbolMargin": "5%",
                "symbolClip": true,
                "symbolSize": 22.5,
                "symbolPosition": "start",
                "symbolOffset": [
                    20,
                    0
                ],
                "symbolBoundingData": 300,
                "data": [
                    13,
                    42,
                    67,
                    81,
                    86,
                    94,
                    166,
                    220,
                    249,
                    262
                ],
                "z": 10
            },
            {
                "type": "pictorialBar",
                "itemStyle": {
                    "normal": {
                        "opacity": 0.3
                    }
                },
                "label": {
                    "normal": {
                        "show": false
                    }
                },
                "animationDuration": 0,
                "symbolRepeat": "fixed",
                "symbolMargin": "5%",
                "symbol": "image://",
                "symbolSize": 22.5,
                "symbolBoundingData": 300,
                "symbolPosition": "start",
                "symbolOffset": [
                    20,
                    0
                ],
                "data": [
                    13,
                    42,
                    67,
                    81,
                    86,
                    94,
                    166,
                    220,
                    249,
                    262
                ],
                "z": 5
            }
        ]
    };

    myChart.setOption(option)
    setInterval(function () {
        update()
    }, 3000)

    update()
    function update() {
        axios.get('/api?type=getProvinceCount')
            .then(function (data) {
                data.data.sort(function (a, b) {
                    return a.confirmedCount > b.confirmedCount
                })
                var names = new Array()
                var count = new Array()
                for (var i = 0; i < data.data.length; i++) {
                    data.data[i].provinceName = data.data[i].provinceName.replace("自治区","")
                    data.data[i].provinceName = data.data[i].provinceName.replace("省","")
                    data.data[i].provinceName = data.data[i].provinceName.replace("市","")
                    data.data[i].provinceName = data.data[i].provinceName.replace("维吾尔","")
                    data.data[i].provinceName = data.data[i].provinceName.replace("回族","")
                    data.data[i].provinceName = data.data[i].provinceName.replace("壮族","")
                    names.push(data.data[i].provinceName)
                    count.push(data.data[i].confirmedCount)
                }
                myChart.setOption({
                    series: [{
                        data: count.slice()
                    }, {
                        data: count.slice()
                    }],
                    yAxis: [{
                        data: names.slice()
                    }]
                })
            })
            .catch(function (error) { // 请求失败处理
                console.log(error);
            });
    }
</script>

</html>